<template>
  <div class="tip-box-poup" v-if="props.isShow">
    <div class="tip-box-wrapper">
      <div class="tip-tab">
        <div class="tab-hd">
          <div
            class="hd-item"
            v-for="(item, index) in tabList"
            :key="index"
            @click="handleChangeTab(index)"
            :class="{ cur: index == curTabIndex }"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="tab-bd-box">
          <div class="tab-bd" style="padding-left: 25%" v-if="curTabIndex == 0">
            <div class="content-text" v-html="tabList[0].content"></div>
            <!-- <div class="content-text">1.掌渥迈克尔逊干涉仪的干涉原理；</div>
            <div class="content-text">2.了解非定域干涉和时间相干性；</div>
            <div class="content-text">3.学会测量激光波长和介质的折射率</div>
            <div class="content-text">
              4.学习一种测定光波长的方法，加强对等倾干涉的理解。
            </div> -->
          </div>
          <div class="tab-bd" v-if="curTabIndex == 1">
            <div class="content-text" v-html="tabList[1].content"></div>
            <!-- <div class="content-text">
              如图所示是迈克耳逊干涉仪的原理示意图。来自光源的一束光照到分束器
              BS 上， 50% 的入射光被反射， 50%
              的光透射，因此光束被均分为两束，一束反射向定镜 M1 ，一束透射后射向
              M2 。两个反射镜都将光反射回分束器，来自 M1 的光透过分束器 BS
              到达观察者的眼睛。来自 M2
              的光通过补偿板，再通过分束器反射到观察者的眼睛 E 。
            </div>
            <div class="content-img">
              <img :src="'./data/experiment-img.png'" />
            </div>
            <div class="content-text">
              由于两束光来自同一个光源，它们的相位高度相关。将扩束器放到光源与分束器之间时，就可以观察到明暗相间的条纹，即干涉条纹。在上图中
              M2’ 是 M2 的虚像。迈克耳逊干涉仪光程差可以看做是 M1 与 M2’
              之间的气隙。补偿板与分束器的厚度及折射率相同。两束光在分束器与补偿板中所经过的光程是相等的，不同波长的光有相同的光程差。
            </div> -->
          </div>

          <div class="tab-bd" style="padding-left: 25%" v-if="curTabIndex == 2">
            <div class="content-text" v-html="tabList[2].content"></div>
            <!-- <div class="content-text">
              该干涉仪在迈克尔逊模式下可以观察干涉现象（如等倾干涉，等厚干涉，白光干涉等），精细波长对比，确定零光程差，测量空气及薄片的折射率。可以在迈克尔逊模式的基础上，完成格林泰曼干涉。在法布里-珀罗模式下可以观察多光束干涉，测量光谱的精细结构（如钠双线波长差）。
            </div>
            <div class="content-img">
              <img :src="'./data/LGS-7A 精密干涉仪.jpg'" />
            </div>
            <div class="content-text">
              1881
              年，迈克耳逊设计制造了一台双光束干涉仪。起初迈克耳逊设计这一干涉仪是为了测量以太（一种假设的光传播介质）是否存在，部分由于他的努力，以太被证明是不存在的。此后，迈克耳逊干涉仪被广泛地用于测量光的波长，或已知光源波长测量微小位移，以及研究光学介质。
            </div> -->
          </div>
          <div class="tab-bd" style="padding-left: 10%" v-if="curTabIndex == 3">
            <div class="content-text" v-html="tabList[3].content"></div>
            <!-- <div class="content-text">
              1.将迈克尔逊干涉仪放置在平台或支架上，并确保其稳定性。
            </div>
            <div class="content-text">
              2.打开光源，使光线通过分束器进入干涉仪。
            </div>
            <div class="content-text">
              3.调整分束器，使光线分为两束并沿不同的光路传播。
            </div>
            <div class="content-text">
              4.将两个反射镜分别放置在两条光路上，并调整其位置，使两束光线在合束器处相遇。
            </div>
            <div class="content-text">
              5.观察干涉图样，并根据实验需要调整反射镜的位置，以获得理想的干涉条纹。
            </div>
            <div class="content-text">
              6.可以通过调节滤光片、透镜等辅助光学元件，来改变光的特性和实验条件，进一步观察和记录干涉现象。
            </div> -->
          </div>
          <div class="tab-bd" style="padding-left: 10%" v-if="curTabIndex == 4">
            <div class="content-text" v-html="tabList[4].content"></div>
            <!-- <div class="content-text">
              1.在实验过程中，要注意保持实验环境的稳定性，避免外界震动和干扰对实验结果的影响。
            </div>
            <div class="content-text">
              2.保持干涉仪的光路清洁，并定期检查和清理反射镜和其他光学元件，以确保实验的准确性。
            </div>
            <div class="content-text">
              3.利用光探测器等测量设备，准确记录实验数据，并进行分析和整理。
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="tip-button" @click="handleCloseTipPoup">
      跳过提示，开始组装仪器 <img src="@/assets/icon-arrow-link.png" />
    </div>
    <div class="tip-bg"></div>
  </div>
</template>
<script setup lang="ts">
import { ref ,watch} from "vue";
const props = defineProps({
  isShow: Boolean,
  datas: {
    type: Object,
    default: () => ({}),
  },
});
watch(()=>props.datas,(val)=>{
  let equipments = val.equipments;
    let equipmentsData =""
    equipments.forEach((item:any)=>{
      if(item.amount>1){
        equipmentsData += `<p>${item.equipment.name}*${item.amount}</p>`
      }else{
        equipmentsData += `<p>${item.equipment.name}</p>`
      }
    })
  tabList.value[0].content = val.objective || "";
  tabList.value[1].content = val.principle || "";
  tabList.value[2].content = equipmentsData || "";
  tabList.value[3].content = val.steps || "";
  tabList.value[4].content = val.notice|| "";
},{
  deep:true
})
const curTabIndex = ref(0);
const tabList = ref([
  {
    name: "实验目的",
    content:""
  },
  {
    name: "实验原理",
    content:""
  },
  {
    name: "实验器材",
    content:""
  },
  {
    name: "实验步骤",
    content:""
  },
  {
    name: "注意事项",
    content:""
  },
]);

const handleChangeTab = (index: number) => {
  curTabIndex.value = index;
};
const emit = defineEmits(["closeTipPoup"]);
const handleCloseTipPoup = () => {
  emit("closeTipPoup");
};
</script>
<style lang="less" scoped>
.tip-box-poup {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  .tip-bg {
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
  }
  .tip-button {
    width: 437px;
    z-index: 10002;
    cursor: pointer;
    height: 59px;
    background: #2776ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 24px;
    color: #ffffff;
    line-height: 30px;
    img {
      width: 30px;
      height: 30px;
      margin-left: 10px;
    }
  }
  .tip-box-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    .tip-tab {
      width: auto;
      .tab-hd {
        height: 60px;
        display: flex;
        align-items: center;
        .hd-item {
          width: 162px;
          height: 60px;
          margin-right: 6px;
          background: #edf3fe;
          border-radius: 20px 20px 0 0;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 16px;
          color: #262626;
          text-align: center;

          &.cur {
            background: #2776ff;
            border: 1px solid #e6ebf1;
            border-radius: 0;
            color: #fff;
          }
        }
      }
      .tab-bd-box {
        width: 1081px;
        height: 485px;
        overflow-y: auto;
        background: #ffffff;
        border: 1px solid #e6ebf1;
        border-radius: 0 20px 20px 20px;
        .tab-bd {
          padding: 20px;
          display: flex;
          box-sizing: border-box;
          min-height: 100%;
          flex-direction: column;
          justify-content: center;
          .content-text {
            font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 20px;
            color: #262626;
            letter-spacing: 0;
            line-height: 1.5;
            text-align: left;
          }
          .content-img {
            width: 50%;
            height: auto;
            margin: 20px auto;
            img {
              width: 100%;
            }
          }
        }
      }
    }
  }
}
</style>
